<template>
<div class="modal">
    <!-- 模态框 -->
    <!-- 遮罩层 -->
    <div class="mask"  @click="changeIsShowLoginModal(false)"></div>
    <!-- 登录框 -->
    <div class="loginbox">
        <div class="close" @click="changeIsShowLoginModal(false)"></div>
        <nav class="nav">
            <a href="javascript:;" :class="{active:isShowPhoneLogin}" @click="isShowPhoneLogin=true">手机号码登录</a>
            <a href="javascript:;"   :class="{active:!isShowPhoneLogin}" @click="showQr">微信扫码登录</a>
        </nav>
        <div class="content">
            <!-- 手机号码登录 -->
            <div class="phoneLogin" v-show="isShowPhoneLogin">
                <div class="row">
                    <input type="text" placeholder="请输入手机号"  v-model="phoneNumber">
                </div>
                <div class="row">
                    <slide-verify :l="42" :r="20" :w="362" :h="140" @success="onSuccess" @fail="onFail" @refresh="onRefresh" :style="{ width: '100%' }" class="slide-box" ref="slideBlock" :slider-text="msg" :imgs='imgs'></slide-verify>
                </div>
                <div class="row">  
                    <input type="text" placeholder="请输入短信验证码" v-model="yzmcode">
                    <button class="btn btncode" v-show="!isShowCount" @click="getCode">获取验证码</button>
                    <button class="btn btncode" v-show="isShowCount">{{count+'s'}}</button>
                </div>
                <div class="row">
                    <button class="btn btnlogin" @click="submitFn">登录</button>
                </div>
            </div>
            <!-- 微信扫码登陆 -->
            <div class="qrLogin" id="weixin" v-show="!isShowPhoneLogin"></div>

        </div>

        </div>
</div>
</template>

<script>
import {mapMutations,mapActions} from 'vuex';
import {SendSMSAPI,PhoneLoginAPI,BindPhoneAPI,UserProfilesAPI} from '@/request/api'
import {validatePhoneNumber} from '../utils'
export default {
    data () {
        return {
            // 是否显示手机号码登录框
              isShowPhoneLogin:true ,
               msg: "向右滑动" ,
                //  滑块的背景图数组
                imgs:[
                    require('../assets/img/integral-01.9386d4bf.png'),
                    require('../assets/img/integral-03.9870f3f1.png'),
                    require('../assets/img/integral-04.afadcbdf.png')
                ],
                phoneNumber:'',
                isShowCount:false,
                count:5,
                yzmcode:''
        }
    },
methods:{
    ...mapMutations({
        changeIsShowLoginModal:'showModal/changeIsShowLoginModal',
        chanIsLogined:"loginStatus/chanIsLogined",
        changeIsShowToast:"showToast/changeIsShowToast"
    }),
      ...mapActions({
      asyncShowToast: "showToast/asyncShowToast",
      asyncChangeUserInfo:'userInfo/asyncChangeUserInfo'
    }),
        // 拼图成功
    onSuccess(times) {
      let ms = (times / 1000).toFixed(1);
      this.msg = "login success, 耗时 " + ms + "s";
    },
    // 拼图失败
    onFail() {
      this.onRefresh(); // 重新刷新拼图
    },
    // 拼图刷新
    onRefresh() {
      this.msg = "再试一次";
    },
    toVerify(){
        if(!validatePhoneNumber(this.phoneNumber)){
            // alert('请输入正确的手机号码');
            // this.changeIsShowToast(true);
            this.asyncShowToast({
                isShow:true,
                title:'请输入正确的手机号码',
                type:'danger'
            })
            return;
        }
         if(this.msg=='向右滑动'||this.msg=='再试一次'){
          this.asyncShowToast({
          isShow: true,
          title: "请输入滑块验证码！",
          type: "danger",
        });
            return
        }
        return true;
    },
    // 登录方法
    async submitFn(){
        // if(this.msg=='向右滑动'||this.msg=='再试一次'){
        //     alert('请重新滑动滑块验证码');
        //     return
        // }
        // alert('登录成功')
        

        if(!this.toVerify())return;
        if(this.yzmcode==''){
            alert('请输入验证码');
            return;
        }
        // 4.发起登录请求
        let uuid =localStorage.getItem('uuid');
        let res=null;
        if(uuid){
            res =await BindPhoneAPI({
            verifyCode:this.yzmcode,
            phone:this.phoneNumber,
            uuid,
        });
        }else{
            res =await PhoneLoginAPI({
            verifyCode:this.yzmcode,
            phone:this.phoneNumber,
        });
        }
       
        if(!res) return;
        if(res.code==0){
            // console.log('登录成功',res);
            // 1.提示登陆成功
            alert('手机号登录成功');
            //2.存储token，后面发请求时需要用到。localstorage setItem() getItem()
            localStorage.setItem('x-auth-token',res['x-auth-token']);
            // 3.隐藏登录框
            this.changeIsShowLoginModal(false);
            // 购物车切换
            this.chanIsLogined(true)
            // 5.清除uuid
            localStorage.removeItem('uuid')

            // 测试 请求用户信息
            // let user =await UserProfilesAPI()
            // 登陆成功后，调用actions方法更新用户
            this.asyncChangeUserInfo()
        }

        // console.log('我是判断短信验证码的....');
    },
    // 获取验证码
   async getCode(){
        // 1.判断手机号 是否输入正确 不正确，提示
        // if(!validatePhoneNumber(this.phoneNumber)){
        //     alert('请输入正确的手机号码');
        //     return;
        // }
        //  if(this.msg=='向右滑动'||this.msg=='再试一次'){
        //     alert('请重新滑动滑块验证码');
        //     return
        // }
        let flag =this.toVerify();
        if(!flag) return;
        // console.log('验证通过了');
        // 倒计时功能
       

        // 3、验证成功后，发起请求，获取验证码成功，则进行倒计时，并展示秒数
        let res =await SendSMSAPI({
            phone:this.phoneNumber
        })
        // console.log('duanx',res);
        // 拦截器已经报错了
        if(!res)return;
        // console.log('不走了....');
        // 成功的场景
        if(res.code==0){
         this.isShowCount=true;
        let timer=setInterval(()=>{
            this.count--;
            if(this.count==0){
                // 停止定时器
                clearInterval(timer);
                this.count=5;
                this.isShowCount=false
            }
        },1000)
        }
    },
    showQr(){
        this.isShowPhoneLogin=false
        // 申请微信登录二维码
          let _this = this;
          new WxLogin({
            id: "weixin",
            appid: "wx67cfaf9e3ad31a0d", // 这个appid要填死
            scope: "snsapi_login",
            // 扫码成功后重定向的接口
            redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
            // state填写编码后的url
            state: encodeURIComponent(
              window.btoa("http://127.0.0.1:8080" + _this.$route.path)
            ),
            // 调用样式文件
            href: "data:text/css;base64,LmltcG93ZXJCb3ggLmluZm8sDQouaW1wb3dlckJveCAudGl0bGV7DQogICAgZGlzcGxheTogbm9uZTsNCn0gICAg",
          });
    }
}
}
</script>

<style lang='less' scoped>
.modal{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    .mask{
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
    .loginbox{
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        background: url('../assets/img/login-box-bg.png');
        .close{
            position: absolute;
            right: 60px;
            top: 15px;
            width: 22px;
            height: 22px;
            background: url('../assets/img/close.png');
        }
        .nav{
            margin-top: 45px;
            text-align: center;
            font-size: 18px;
            a{
                text-decoration: none;
                color: black;
                &.active{
                    color: blue;
                }
            }
        }
        .content{
            width: 355px;
            margin: 30px auto;
            .phoneLogin{
                .row{
                    display: flex;
                    margin-bottom: 20px;
                    input{
                        flex: 1;
                        height: 50px;
                        text-indent: 1em;
                        outline: none;
                    }
                    .btn{
                        background: #0a328e;
                        color: #fff;
                    }
                    .btncode{
                        margin-left: 10px;
                        width: 100px;
                    }
                    .btnlogin{
                        height: 50px;
                        flex: 1;
                    }
                }
            }
        }
    }
}

#weixin{
    /* background-color: #fcf; */
    display: flex;
    justify-content: center;
    margin-top: -20px;
}


/deep/.slide-box {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    canvas {
        position: absolute;
        left: 0;
        top: -120px;
        display: none;
        width: 100%;
        box-sizing: border-box;
    }
    .slide-verify-block{
        width: 85px;
        height: 136px;
    }
    .slide-verify-refresh-icon {
        top: -120px;
        display: none;
    }
    &:hover {
        canvas {
            display: block;
        }
        .slide-verify-refresh-icon {
            display: block;
        }
    }
}

</style>